// src/FilterSortBar.tsx
import { FC } from "react";
import {Filter} from "../file/type";

interface Props {
  value: Filter;
  onChange: (next: Filter) => void;
  setKeyword: (keyword: string) => void; //重置搜索用
}

const FilterSortBar: FC<Props> = ({ value, onChange, setKeyword }) => {
  //重置筛选和搜索选项
  const reset = () => {
    onChange({ category: "", sortKey: "score", sortOrder: "desc" });//筛选
    setKeyword("");//搜索
  };

  return (
    <div style={{ margin: "16px 0" }}>
      <label>
        类别：
        <select
          value={value.category}
          onChange={(e) => onChange({ ...value, category: e.target.value })}
        >
          <option value="">全部</option>
          <option value="前端">前端</option>
          <option value="后端">后端</option>
        </select>
      </label>

      <label style={{ marginLeft: 16 }}>
        排序：
        <select
          value={`${value.sortKey}-${value.sortOrder}`}
          onChange={(e) => {
            const [k, o] = e.target.value.split("-");
            onChange({ ...value, sortKey: k as any, sortOrder: o as any });
          }}
        >
          <option value="score-desc">分数 ↓</option>
          <option value="score-asc">分数 ↑</option>
          <option value="name-asc">名称 A-Z</option>
          <option value="name-desc">名称 Z-A</option>
        </select>
      </label>
      <label style={{ marginLeft: 16 }}>
        <button onClick={reset}>重置</button>
      </label>
    </div>
  );
};

export default FilterSortBar;
